import axios from "axios";
import React, { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";

const Index = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const out_trade_no = searchParams.get("out_trade_no");
  const [TRADE_STATUS, SET_TRADE_STATUS] = useState("");

  useEffect(() => {
    if (!out_trade_no) return;
    (async () => {
      const resp = await axios.get("/api/pay/order/query", {
        params: { out_trade_no },
      });
      console.log(resp.data);
      SET_TRADE_STATUS(resp.data.data.tradeStatus);
    })();
  }, [out_trade_no]);

  if (TRADE_STATUS === "TRADE_SUCCESS") return <div>支付结果: 交易成功</div>;
  if (TRADE_STATUS === "WAIT_BUYER_PAY")
    return <div>支付结果: 交易创建，等待买家付款</div>;
  if (TRADE_STATUS === "TRADE_CLOSED")
    return <div>支付结果: 未付款交易超时关闭，或支付完成后全额退款</div>;
  if (TRADE_STATUS === "TRADE_FINISHED")
    return <div>支付结果: 交易结束，不可退款</div>;
  if (!out_trade_no) return <div>交易不存在</div>;

  return <div>交易查询中...</div>;
	
};

export default Index;
